import { useFullscreen } from "@vueuse/core";
import { useAppStore } from "..";

/** 订阅app store */
export const subscribeAppStore = () => {
  const { isFullscreen, toggle } = useFullscreen();

  const appStore = useAppStore();

  const scope = effectScope();

  const update = () => {
    if (appStore.contentFull && !isFullscreen.value) toggle();
    if (!appStore.contentFull && isFullscreen.value) toggle();
  };

  scope.run(() => {
    watch(
      () => appStore.contentFull,
      () => update()
    );

    watch(isFullscreen, (newValue) => {
      if (!newValue) appStore.setContentFull(false);
    });
  });

  onScopeDispose(() => scope.stop());
};
